<template>
  <div class="p-4">
    <BasicTable
      @register="registerTable"
      @edit-end="handleEditEnd"
      @edit-cancel="handleEditCancel"
      :beforeEditSubmit="beforeEditSubmit"
    />
  </div>
</template>
<script lang="ts" setup>
import { h } from "vue";
import { BasicTable, useTable, BasicColumn } from "@/components/Table";
import { optionsListApi } from "@/api/demo/select";

import { demoListApi } from "@/api/demo/table";
import { treeOptionsListApi } from "@/api/demo/tree";
import { useMessage } from "@/hooks/web/useMessage";
import { Progress } from "ant-design-vue";

const columns: BasicColumn[] = [
  {
    title: "输入框",
    dataIndex: "name",
    edit: true,
    editComponentProps: {
      prefix: "$",
    },
    width: 200,
  },
  {
    title: "默认输入状态",
    dataIndex: "name7",
    edit: true,
    editable: true,
    width: 200,
  },
  {
    title: "输入框校验",
    dataIndex: "name1",
    edit: true,
    // 默认必填校验
    editRule: true,
    width: 200,
  },
  {
    title: "输入框函数校验",
    dataIndex: "name2",
    edit: true,
    editRule: async (text) => {
      if (text === "2") {
        return "不能输入该值";
      }
      return "";
    },
    width: 200,
  },
  {
    title: "数字输入框",
    dataIndex: "id",
    edit: true,
    editRule: true,
    editComponent: "InputNumber",
    width: 200,
    editComponentProps: () => {
      return {
        max: 100,
        min: 0,
      };
    },
    editRender: ({ text }) => {
      return h(Progress, { percent: Number(text) });
    },
  },
  {
    title: "下拉框",
    dataIndex: "name3",
    edit: true,
    editComponent: "Select",
    editComponentProps: {
      options: [
        {
          label: "Option1",
          value: "1",
        },
        {
          label: "Option2",
          value: "2",
        },
      ],
    },
    width: 200,
  },
  {
    title: "远程下拉",
    dataIndex: "name4",
    edit: true,
    editComponent: "ApiSelect",
    editComponentProps: {
      api: optionsListApi,
      resultField: "list",
      labelField: "name",
      valueField: "id",
    },
    width: 200,
  },
  {
    title: "远程下拉树",
    dataIndex: "name8",
    edit: true,
    editComponent: "ApiTreeSelect",
    editRule: false,
    editComponentProps: {
      api: treeOptionsListApi,
      resultField: "list",
    },
    width: 200,
  },
  {
    title: "日期选择",
    dataIndex: "date",
    edit: true,
    editComponent: "DatePicker",
    editComponentProps: {
      valueFormat: "YYYY-MM-DD",
      format: "YYYY-MM-DD",
    },
    width: 200,
  },
  {
    title: "时间选择",
    dataIndex: "time",
    edit: true,
    editComponent: "TimePicker",
    editComponentProps: {
      valueFormat: "HH:mm",
      format: "HH:mm",
    },
    width: 200,
  },
  {
    title: "勾选框",
    dataIndex: "name5",
    edit: true,
    editComponent: "Checkbox",
    editValueMap: (value) => {
      return value ? "是" : "否";
    },
    width: 200,
  },
  {
    title: "开关",
    dataIndex: "name6",
    edit: true,
    editComponent: "Switch",
    editValueMap: (value) => {
      return value ? "开" : "关";
    },
    width: 200,
  },
  {
    title: "单选框",
    dataIndex: "radio1",
    edit: true,
    editComponent: "RadioGroup",
    editComponentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    width: 200,
  },
  {
    title: "单选按钮框",
    dataIndex: "radio2",
    edit: true,
    editComponent: "RadioButtonGroup",
    editComponentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    width: 200,
  },
  {
    title: "远程单选框",
    dataIndex: "radio3",
    edit: true,
    editComponent: "ApiRadioGroup",
    editComponentProps: {
      api: optionsListApi,
      resultField: "list",
      labelField: "name",
      valueField: "id",
    },
    width: 200,
  },
];

const [registerTable] = useTable({
  title: "可编辑单元格示例",
  api: demoListApi,
  columns: columns,
  showIndexColumn: false,
  bordered: true,
});

const { createMessage } = useMessage();

function handleEditEnd({ record, index, key, value }: Recordable) {
  console.log(record, index, key, value);
  return false;
}

// 模拟将指定数据保存
function feakSave({ value, key, id }) {
  createMessage.loading({
    content: `正在模拟保存${key}`,
    key: "_save_fake_data",
    duration: 0,
  });
  return new Promise((resolve) => {
    setTimeout(() => {
      if (value === "") {
        createMessage.error({
          content: "保存失败：不能为空",
          key: "_save_fake_data",
          duration: 2,
        });
        resolve(false);
      } else {
        createMessage.success({
          content: `记录${id}的${key}已保存`,
          key: "_save_fake_data",
          duration: 2,
        });
        resolve(true);
      }
    }, 2000);
  });
}

async function beforeEditSubmit({ record, index, key, value }) {
  console.log("单元格数据正在准备提交", { record, index, key, value });
  return await feakSave({ id: record.id, key, value });
}

function handleEditCancel() {
  console.log("cancel");
}
</script>
